<!--
 * @Author: HuRrongChao 1556810922@qq.com
 * @Date: 2024-10-08 17:02:40
 * @LastEditors: HuRrongChao
 * @LastEditTime: 2025-03-03 11:42:28
-->
<template>
  <div class="comment-box">
    <el-avatar 
      :src="comment.avatar_url || ''" 
      :size="38"
      class="comment-profile"
    />
    <div class="comment-content">
      <div class="comment-content-id"><span>{{ comment.name }}</span></div>
      <div class="comment-content-info">{{ comment.info }}</div>
      <div class="comment-content-time">{{ formatTime(comment.time) }}</div>
    </div>
  </div>
</template>

<script>
import api_functions from '@/api/functions'
export default {
  props: {
    comment: {
      type: Object,
      default() {
        return {
          name: '暂无',
          info: '暂无',
          time: '暂无',
          avatar: ''
        }
      },
    }
  },
  methods: {
    formatTime(time) {
      return api_functions.getDateTransform(new Date(time))
    }
  }
}
</script>

<style lang="scss" scoped>
.comment-box {
  width: 100%;
  display: flex;
  margin-top: 15px;
}

.comment-profile {
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.2s ease;

  &:hover {
    transform: scale(1.05);
  }
}

.comment-content {
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  flex: 1;
  min-width: 0;

  &-id {
    display: flex;
    box-sizing: border-box;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-weight: 400;

    span {
      border-bottom: 1px solid transparent;
      transition: all 0.2s ease;

      &:hover {
        color: white;
        border-bottom: 1px solid #fff;
      }
    }
  }

  &-info {
    margin-top: 8px;
    white-space: pre-wrap;
    font-size: 16px;
    font-weight: 400;
    color: white;
    word-break: break-word;
  }

  &-time {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
  }
}
</style>